<html>
  <head>
    <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>拼一个简单的博主状态指示器 | 途读</title>
<link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/dyxang/myblog/favicon.ico?v=1603516677950">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/dyxang/myblog/styles/main.min.css">
<link rel="alternate" type="application/atom+xml" title="拼一个简单的博主状态指示器 | 途读 - Atom Feed" href="https://1inn.now.sh/atom.xml">
<link rel="stylesheet" href="https://fonts.lug.ustc.edu.cn/css?family=Droid+Serif:400,700">
    <meta name="description" content="博主状态指示器，可以作为博客存活确认、博主签名展示、或者博主状态显示来使用

并不是网站服务器状态显示
多么质朴的封面啊！


准备一下
这我老早就想做了，一直咕到现在😂。
该文章中需要的物件：

小牌牌渲染服务网站：Shields
一个..." />
    <meta name="keywords" content="" />
    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.0.3/build/highlight.min.js"></script>
  </head>
  <body>
    <div class="main">
      <div class="main-content">
        <div class="site-header">
  <a href="https://1inn.now.sh">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid meet">
<g id="layer101" fill="#202020" stroke="none">
<path d="M376 989 c-57 -14 -102 -45 -138 -96 -59 -86 -68 -163 -48 -403 5 -63 7 -116 5 -118 -3 -3 -28 -9 -57 -13 -58 -9 -103 -44 -93 -72 4 -9 36 -26 71 -37 79 -27 115 -56 143 -116 12 -25 40 -65 63 -90 l41 -44 125 0 c123 0 127 1 154 27 20 19 28 37 28 60 0 67 -33 101 -181 186 -75 44 -123 30 -78 -21 22 -25 24 -34 21 -125 -3 -94 -3 -97 -26 -97 -34 0 -79 46 -114 117 -33 65 -77 109 -120 120 -15 3 -43 13 -62 21 -26 11 -31 16 -19 22 29 17 182 31 375 35 203 4 291 -5 333 -32 20 -13 22 -20 17 -56 -10 -61 -46 -134 -99 -200 -45 -55 -46 -57 -22 -57 34 0 117 119 146 210 19 59 20 70 8 96 -8 16 -23 33 -35 38 -22 10 -27 48 -54 366 -13 154 -72 253 -167 279 -45 13 -163 13 -217 0z m234 -44 c50 -26 93 -90 104 -155 7 -39 45 -414 43 -416 -1 -1 -63 2 -137 6 -74 4 -137 7 -140 5 -8 -5 -240 -15 -240 -11 0 3 -3 12 -7 22 -5 14 -3 16 11 11 25 -10 155 19 177 39 30 27 24 53 -17 70 -39 16 -76 13 -137 -13 -20 -9 -40 -14 -43 -11 -3 3 -5 72 -5 152 0 155 4 172 58 244 30 40 72 62 138 72 62 10 162 2 195 -15z m-210 -464 c0 -15 -20 -24 -66 -31 -36 -6 -43 -4 -47 11 -6 21 9 26 71 28 23 0 42 -3 42 -8z m168 -328 c46 -35 45 -78 -3 -99 -70 -29 -75 -24 -75 66 0 80 0 81 23 69 12 -6 37 -22 55 -36z"/>
<path d="M591 519 c-52 -16 -81 -39 -81 -65 0 -31 27 -44 89 -44 100 0 171 54 128 97 -19 19 -91 25 -136 12z m119 -37 c0 -20 -28 -32 -77 -32 -37 0 -53 4 -53 13 0 8 3 17 7 20 9 10 123 9 123 -1z"/>
</g>
<g id="layer102" fill="#595959" stroke="none">
<path d="M376 989 c-57 -14 -102 -45 -138 -96 -59 -86 -68 -163 -48 -403 5 -63 7 -116 5 -118 -3 -3 -28 -9 -57 -13 -58 -9 -103 -44 -93 -72 4 -9 36 -26 71 -37 81 -27 112 -54 147 -123 41 -80 87 -120 141 -123 35 -2 45 1 49 15 3 14 11 18 33 14 19 -3 25 -2 16 5 -9 6 -12 31 -10 86 l3 78 50 -34 c41 -27 51 -39 53 -66 3 -28 -1 -34 -30 -48 l-33 -15 33 6 c27 6 32 4 32 -13 0 -11 -6 -23 -13 -25 -6 -3 -3 -6 7 -6 33 -2 76 48 76 86 0 67 -33 101 -181 186 -75 44 -123 30 -78 -21 22 -25 24 -34 21 -125 -3 -94 -3 -97 -26 -97 -34 0 -79 46 -114 117 -33 65 -77 109 -120 120 -15 3 -43 13 -62 21 -26 11 -31 16 -19 22 29 17 182 31 375 35 203 4 291 -5 333 -32 20 -13 22 -20 17 -56 -10 -61 -46 -134 -99 -200 -45 -55 -46 -57 -22 -57 34 0 117 119 146 210 19 59 20 70 8 96 -8 16 -23 33 -35 38 -22 10 -27 48 -54 366 -13 154 -72 253 -167 279 -45 13 -163 13 -217 0z m234 -44 c50 -26 93 -90 104 -155 7 -39 45 -414 43 -416 -1 -1 -63 2 -137 6 -74 4 -137 7 -140 5 -8 -5 -240 -15 -240 -11 0 3 -3 12 -7 22 -5 14 -3 16 11 11 25 -10 155 19 177 39 30 27 24 53 -17 70 -39 16 -76 13 -137 -13 -20 -9 -40 -14 -43 -11 -3 3 -5 72 -5 152 0 155 4 172 58 244 30 40 72 62 138 72 62 10 162 2 195 -15z m-210 -464 c0 -15 -20 -24 -66 -31 -36 -6 -43 -4 -47 11 -6 21 9 26 71 28 23 0 42 -3 42 -8z m-130 -37 c0 -8 -9 -14 -20 -14 -11 0 -20 7 -20 15 0 8 5 15 11 15 5 0 7 6 3 13 -5 8 -2 8 9 -2 9 -7 17 -20 17 -27z"/>
<path d="M540 799 c-19 -5 -90 -12 -157 -15 -90 -5 -123 -11 -123 -20 0 -24 20 -25 171 -9 147 15 189 25 189 45 0 12 -32 11 -80 -1z"/>
<path d="M437 654 c-6 -6 -1 -72 9 -123 5 -22 7 -22 20 -9 12 12 14 27 7 73 -7 54 -20 75 -36 59z"/>
<path d="M591 519 c-52 -16 -81 -39 -81 -65 0 -31 27 -44 89 -44 100 0 171 54 128 97 -19 19 -91 25 -136 12z m119 -37 c0 -20 -28 -32 -77 -32 -37 0 -53 4 -53 13 0 8 3 17 7 20 9 10 123 9 123 -1z m-146 -11 c8 -13 -4 -42 -15 -35 -12 7 -12 44 0 44 6 0 12 -4 15 -9z"/>
</g>
</svg>
  </a>
  <h1 class="site-title webfont">
    途读
  </h1>
  <p class="site-description webfont">
    我的小站
  </p>
  <div class="menu-container webfont">
    
      
        <a href="/" class="menu">
          主页面
        </a>
      
    
      
        <a href="/post/about/" class="menu">
          关于我
        </a>
      
    
      
        <a href="/post/peng-you/" class="menu">
          朋友们
        </a>
      
    
      
        <a href="/tags/" class="menu">
          云标签
        </a>
      
    
      
        <a href="/archives/" class="menu">
          总归档
        </a>
      
    
  </div>
  <div class="social-container">
    
      
    
      
    
      
    
      
    
      
    
  </div>
</div>

        <div class="post-detail">
          <article class="post">
            <h2 class="post-title">
              拼一个简单的博主状态指示器
            </h2>
            <div class="post-info">
              <span>
                2020-08-17
              </span>
              <span>
                4 min read
              </span>
              
            </div>
            
              <img class="post-feature-image" src="https://pic.downk.cc/item/5f3a282114195aa59492d377.png" alt="">
            
            <div class="post-content-wrapper">
              <div class="post-content">
                <p>博主状态指示器，可以作为博客存活确认、博主签名展示、或者博主状态显示来使用</p>
<blockquote>
<p>并不是网站服务器状态显示<br>
多么质朴的封面啊！</p>
</blockquote>
<!-- more -->
<h1 id="准备一下">准备一下</h1>
<p>这我老早就想做了，一直咕到现在😂。<br>
该文章中需要的物件：</p>
<ul>
<li>小牌牌渲染服务网站：<a href="https://shields.io/">Shields</a></li>
<li>一个 endpoint，或者一个 api ，甚至是一个 json 文件，都可以</li>
</ul>
<h1 id="简单说一下怎么用">简单说一下怎么用</h1>
<p>在 Github 上我们总可以看到一种小牌牌放在 Readme 里，基本上都是由 Shields.io 渲染的（如图）， Shields.io 提供包括 Build Code Coverage Analysis Chat Dependencies Size 等等类型的展示。都是动态更新的，当然也可以弄一块静态的牌牌，不过既然都是静态了，直接放一个 svg 图片岂不是更好？，我使用的是 Dynamic 这种，endpoint我不是开发者，没必要专门再弄一个 api 出来。<br>
<img src="https://pic.downk.cc/item/5f3a264014195aa594925132.png" alt="" loading="lazy"></p>
<h1 id="开始缝合">开始缝合</h1>
<p>第一步，找一个api地址，我是v站用户，所以直接使用v站的api，详情请看 <a href="https://www.v2ex.com/p/7v9TEc53">V2EXAPI接口</a>。<br>
第二步，研究下 v站api，显示我的签名部分（即用户的自我介绍）只需要  <code>https://www.v2ex.com/api/members/show.json?username=用户名</code> 或者 <code>https://www.v2ex.com/api/members/show.json?id=用户id</code> ，然后只展示其中的 tagline 部分（bio 部分也行）其实前者就是用户设置的“签名”，后者是“个人简介”。v站用户api的json部分数据例子：</p>
<pre><code class="language-json">{
	&quot;username&quot;: &quot;你的用户名&quot;,
	&quot;website&quot;: &quot;&quot;,
	&quot;bio&quot;: &quot;想学习&quot;,
	&quot;url&quot;: &quot;https://www.v2ex.com/u/你的用户名&quot;,
	&quot;tagline&quot;: &quot;&quot;,
	&quot;status&quot;: &quot;found&quot;,
……
	&quot;id&quot;: 你的id
}
</code></pre>
<p>第三步，打开 <a href="https://shields.io/">Shields.io</a> ，翻到 Dynamic（如图二） 。从左至右依次是：数据类型 | 牌牌标签 | API地址 | 标签颜色 | 内容前缀 | 内容后缀。<br>
<img src="https://i.loli.net/2020/08/31/JLQb8ejV26Czvio.png" alt="" loading="lazy"><br>
这样说不太直观，参照第二步我已知的数据：</p>
<ol>
<li>data type，因为是 json 文件，所以选 json</li>
<li>label， 我想展示的是状态，那么填“状态”</li>
<li>data url，填入 <code>https://www.v2ex.com/api/members/show.json?username=我的用户名</code></li>
<li>query，展示其中的 bio 字段 ，则填 <code>$.bio</code>。</li>
<li>color，填十六进制的颜色代码，我选择浅蓝色 <code>9cf</code>，若是在别的地方查询到的代码带有 # 号，请去掉。</li>
<li>prefix/suffix，是前缀，为了举例子，我分别填“现在是”和“的心情”。</li>
<li>点击 Make Badge ，成果如下图，注意这里的下图是静态标签，不过照着这个步骤来也是这样的显示效果，在此文中做成静态只是方便我展示。</li>
<li>有各种标签样式，用法与外观详见 Shields.io 的官网 Styles 一栏，可高度自定义。这里有现成的<a href="https://www.dazhuanlan.com/2020/01/29/5e31a83e30b5c/">中文版用法</a>，<strong>注意除第一个字段用问号连接外，其余字段都需用 &amp; 连接。</strong><br>
<img src="https://img.shields.io/badge/%E7%8A%B6%E6%80%81-%E7%8E%B0%E5%9C%A8%E6%98%AF%E6%83%B3%E5%AD%A6%E4%B9%A0%E7%9A%84%E5%BF%83%E6%83%85-9cf" alt="" loading="lazy"></li>
</ol>
<h1 id="结束">结束</h1>
<p>其实还有我提到过的玩法，比如有时你长时间不想写文章但是又想证明你还活着，你可以生成一个“博客主在 几年几月几日 曾经来过”的标签。也可以动态更新签名、心情之类。有一个动态小牌子项目，支持哔哩哔哩、酷安、知乎、微博等平台数据展示，这是 <a href="https://github.com/spencerwooo/Substats#supported-services">Github 项目地址</a>，配色？我用的<a href="https://colors.ichuantong.cn/">这个</a>。</p>

              </div>
              <div class="toc-container">
                <ul class="markdownIt-TOC">
<li><a href="#%E5%87%86%E5%A4%87%E4%B8%80%E4%B8%8B">准备一下</a></li>
<li><a href="#%E7%AE%80%E5%8D%95%E8%AF%B4%E4%B8%80%E4%B8%8B%E6%80%8E%E4%B9%88%E7%94%A8">简单说一下怎么用</a></li>
<li><a href="#%E5%BC%80%E5%A7%8B%E7%BC%9D%E5%90%88">开始缝合</a></li>
<li><a href="#%E7%BB%93%E6%9D%9F">结束</a></li>
</ul>

              </div>
            </div>
          </article>
        </div>

        
          <div class="next-post">
            <div class="next">下一篇</div>
            <a href="https://1inn.now.sh/post/ji-yi-ci-shi-yong-gitbook-sheng-cheng-dian-zi-shu/">
              <h3 class="post-title">
                记一次使用Gitbook生成电子书（失败）
              </h3>
            </a>
          </div>
        
<hr>
        
          <div class="next-post">
            <div class="next">上一篇</div>
            <a href="https://1inn.now.sh/post/fen-xiang-wo-shua-de-yi-xie-wang-zhan/">
              <h3 class="post-title">
                分享我刷的一些网站
              </h3>
            </a>
          </div>
        
        
          

          
            <div id="talkmoe"></div>
<script type="text/javascript">
loadComments();
function loadComments() {
  if (typeof Valine === 'undefined') {
    var getScript = (options) => {
      var script = document.createElement('script');
      script.defer = true;
      script.crossOrigin = 'anonymous';
      Object.keys(options).forEach((key) => {
          script[key] = options[key];
      });
      document.body.appendChild(script);
    };
    getScript({
      src: 'https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js',
      onload: () => {
        newValine();
      }
    });
  } else {
    newValine();
  }
}
function newValine() {
  new Valine({
      el: '#talkmoe',
      appId: 'TOr2oui8CqeHKy9pdTy1MRda-MdYXbMMI',
      appKey: 'TM40Df21wNjaSXeCla4jVeNH',
      placeholder:'Hello!(ovo) 留下你的足迹吧 ！'
  });
}
</script>
          
        

        <div class="site-footer webfont">
  坚持写作，源自二零一五<script src="https://cdn.jsdelivr.net/gh/instantpage/instant.page/instantpage.min.js"></script>
&nbsp;<img src="https://img.shields.io/badge/dynamic/json?url=https://www.v2ex.com/api/members/show.json?username=dyxang&label=%E7%8A%B6%E6%80%81&query=$.bio&color=2edfa3&style=flat-square&colorA=0aa344" />&nbsp;<img src="https://img.shields.io/badge/dynamic/json?colorA=395260&label=%E5%8D%9A%E4%B8%BB&prefix=%E6%9B%BE%E5%9C%A8&query=%24.tagline&suffix=%E6%9D%A5%E8%BF%87&url=https%3A%2F%2Fwww.v2ex.com%2Fapi%2Fmembers%2Fshow.json%3Fusername%3Ddyxang&style=flat-square&color=7397ab" />
  <a class="rss" href="https://1inn.now.sh/atom.xml" target="_blank">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 3c9.941 0 18 8.059 18 18h-3c0-8.284-6.716-15-15-15V3zm0 7c6.075 0 11 4.925 11 11h-3a8 8 0 0 0-8-8v-3zm0 7a4 4 0 0 1 4 4H3v-4z"/></svg> RSS
  </a>
</div>

      </div>
    </div>

    <script>
      hljs.initHighlightingOnLoad()

      let mainNavLinks = document.querySelectorAll(".markdownIt-TOC a");


      window.addEventListener("scroll", event => {
        let fromTop = window.scrollY;

        mainNavLinks.forEach((link, index) => {
          let section = document.getElementById(decodeURI(link.hash).substring(1));
          let nextSection = null
          if (mainNavLinks[index + 1]) {
            nextSection = document.getElementById(decodeURI(mainNavLinks[index + 1].hash).substring(1));
          }
          if (section.offsetTop <= fromTop) {
            if (nextSection) {
              if (nextSection.offsetTop > fromTop) {
                link.classList.add("current");
              } else {
                link.classList.remove("current");    
              }
            } else {
              link.classList.add("current");
            }
          } else {
            link.classList.remove("current");
          }
        });
      });

    </script>
  </body>
</html>